<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>leaflet wind</title>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/dat.gui@0.7.6/build/dat.gui.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/leaflet/dist/leaflet.css">
<style type="text/css">
  html, body {
    margin: 0;
    height: 100%;
    width: 100%
  }
  .container {
    width: 100%;
    height: 100%
  }
</style>
<body>

<div id="map" class="container"></div>
<script src="//cdn.jsdelivr.net/npm/leaflet/dist/leaflet-src.js"></script>
<script src="//cdn.jsdelivr.net/npm/dat.gui@0.7.6/build/dat.gui.js"></script>
<script src="../packages/leaflet/dist/leaflet-wind.js"></script>
<script>
  const map = new L.map('map', {
    // center: [113.53450137499999, 34.44104525],
    zoom: 5,
    center: [113.53450137499999, 34.44104525].reverse(),
    // zoom: 4
  });

  const layer = L.tileLayer('//{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
    subdomains: ['a', 'b', 'c', 'd'],
  });

  map.addLayer(layer);

  fetch('https://sakitam-fdd.github.io/wind-layer/data/wind.json')
    .then(res => res.json())
    .then(res => {
      // const range = vectorField.range || [0.02, 28.21618329965979];
      // const scale = chroma.scale('OrRd').domain(range);

      const velocityScale = [0.1, 0.2, 0.3, 0.4, 0.5];

      const windLayer = new leafletWind.WindLayer('wind', res, {
        windOptions: {
          // colorScale: (m) => {
          //   // console.log(m);
          //   return '#fff';
          // },
          colorScale: [
            "rgb(36,104, 180)",
            "rgb(60,157, 194)",
            "rgb(128,205,193 )",
            "rgb(151,218,168 )",
            "rgb(198,231,181)",
            "rgb(238,247,217)",
            "rgb(255,238,159)",
            "rgb(252,217,125)",
            "rgb(255,182,100)",
            "rgb(252,150,75)",
            "rgb(250,112,52)",
            "rgb(245,64,32)",
            "rgb(237,45,28)",
            "rgb(220,24,32)",
            "rgb(180,0,35)"
          ],
          // velocityScale: 1 / 20,
          // paths: 5000,
          frameRate: 16,
          maxAge: 60,
          globalAlpha: 0.9,
          velocityScale: () => {
            return velocityScale[map.getZoom() - 5] * 0.1 || 0.5;
          },
          // paths: 10000,
          paths: 1000,
        },
      });

      console.log(map, windLayer);

      map.addLayer(windLayer);
    });
</script>
</body>
</html>
